<!--基本信息-->
<template>
  <div class="table-container">
    <div class="vertical-table">
      <table border="1">
        <tr v-for="(item, index) in tableData" :key="index">
          <th class="bold-header">{{ item.label }}</th>
          <td>{{ item.value }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { label: '出生年月', value: '1990年6月' },
        { label: '性别', value: '男' },
        { label: '民族', value: '汉族' },
        { label: '籍贯', value: '江西南昌' },
        { label: '户口所在地', value: '江西南昌红谷滩区' },
        { label: '家庭通讯住址', value: '江西南昌红谷滩区' },
        { label: '婚姻情况', value: '未婚' },
        { label: '加入团党时间', value: '2014年10月1日' },
        { label: '全日制最高学位', value: '硕士' },
        { label: '全日制最高学历', value: '研究生' },
        { label: '所学专业', value: '汉语言文学' },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.table-container {
  width: 100%; /* 确保容器宽度占满父元素 */
  box-sizing: border-box; /* 确保padding不会增加容器的总宽度 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 横向居中子元素 */
  align-items: center; /* 如果需要垂直居中也可以设置，但通常对表格不需要 */
  // background-color: rgb(243, 147, 29);
}
.vertical-table table {
  width: 800px;
  border-collapse: collapse;
  margin: 20px 0px 20px 0px;
  // background-color: rgb(136, 194, 121);
}
.vertical-table table,
.vertical-table td,
.vertical-table th {
  border: 1px solid black;
}
.vertical-table td,
.vertical-table th {
  padding: 8px;
  text-align: left;
}
/* 表头加粗样式 */
.bold-header {
  font-weight: bold;
}
</style>
